<!-- <template>
    <div>
        <div class="header">
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item label="用户名称:">
                    <el-input v-model="searchForm.account" placeholder="请输入用户名称进行查询" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button @click="search">查询</el-button>
                </el-form-item>
            </el-form>
            <el-button>新增</el-button>
        </div>
        <div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prot="account" label="用户名称" width="180">
                </el-table-column>
                <el-table-column prot="level" label="等级" width="180">
               
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" @click="">
                            编辑
                        </el-button>
                        <el-button size="small"  @click="">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script setup>
import { ref } from "vue"
//引入请求接口
import {getDataApiet,addAccountApi,deleteAccountApi,updateAccountApi}  from '../Utils/mockServer/db.js'
import {ElMessage,ElMessageBox} from 'element-plus'


//定义搜索表单的对象
const searchForm = ref({
    account: ''
})

//定义列表数据
const tableData =ref([])

//弹窗可见
const dailogVisible = ref(true)

//定义获取全部数据的方法,等待调用
const getData = (account) =>{
    //1.调用接口
    //2.将后台数据给到列表
    // getDataApiet(account)
    // console.log(getDataApiet(account));
    tableData.value = getDataApiet(account)
}
//调用方法
getData()

//定义搜索方法
const handleSearch = () =>{
    //获取全部数据的方法
    getData(searchForm.value.account)
}

//1.定义删除的方法,并绑定到按钮上
const deleteAccount = (row) =>{
   //2.引入删除接口
   //3.配置符合删除接口的数据
   //4.调用删除接口

}

</script>

<style>
/* 表头样式 */
.header {
    display: flex;
    justify-content: space-between;
}
</style>
 -->

<template>
  <div class="header">
    <el-form :model="searchForm" inline>
      <el-form-item label="用户名称">
        <el-input placeholder="请输入" v-model="searchForm.account"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button @click="">新增</el-button>
  </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="account" label="用户名" />
    <el-table-column prop="createTime" label="等级" />
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button size="small" @click="updataAccount(row)">编辑</el-button>
        <el-button size="small" type="danger" @click="deleteAccount"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <!-- 新增、修改弹窗 -->
  <el-dailog
    v-model="dailogVisible"
    :title="dailogTitle"
    @close="resetAccountDailog"
  >
    <el-form :model="accountForm" label-width="120px">
      <el-form-item lable="用户名称">
        <el-input
          placeholder="请输入用户名称"
          v-model="accountForm.account"
        ></el-input>
      </el-form-item>
      <el-form-item lable="用户等级">
        <el-input
          placeholder="请输入用户等级"
          v-model.number="accountForm.level"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #foot>
      <el-button size="small" @click="updataAccount(row)">编辑</el-button>
      <el-button size="small" type="danger" @click="deleteAccount"
        >删除</el-button
      >
    </template>
  </el-dailog>
</template>
<script setup>
import { ref, computed, getCurrentInstance } from "vue";
import {
  getDataApi,
  addAccountApi,
  deleteAccountApi,
  updateAccountApi,
} from "../Utils/mockServer/db.js";

//定义常量
const Defaultltevel = 1;
const Dailogtitlemap = {
  0: "新增",
  1: "修改",
};
const { proxy: _this } = getCurrentInstance();
//列表数据
const tableData = ref([]);
//搜索表单
const searchForm = ref({
  account: "",
});
//新增、修改时的表单
const accountForm = ref({
  account: "",
  level: Defaultltevel,
  id: 0,
});
//新增、修改弹窗
const dailogVisible = ref(false);
//弹窗类型Map
const dailogTypeMap = ref({
  add: 0,
  modify: 1,
});
//弹窗类型
const dailogTyp = ref(dailogTypeMap.value.add);
//弹窗标语
const dailogTitle = computed(() => {
  return Dailogtitlemap[dailogType];
});
//请求全部数据
const getData = (account) => {
  tableData.value = getDataApi({ account });
};

getData();

//搜索操作
const handleSearch = () => {
  getData(searchForm.value.account);
};

const showAddAccount = () => {
  //显示弹窗，并切换弹窗类型为新增
  dailogVisible.value = true;
  dailogType.value = dailogTypeMap.value.add;
};

const addAccount = () => {
  //获取弹窗中的数据
  const { account, level } = accountForm.value;
  const accountObj = {
    account,
    level,
  };
  //调用接口
  addAccountApi(accountObj);
  _this.$message({
    type: "success",
    message: "添加成功",
  });
  getData();
  resetAccountDailog();
};
// const updataAccount = (row) => {
//     //展示弹框并切换弹框内容
//     dailogVisible.value = true
//     dailogType.value = dailogTypeMap.value.add

// }

// const addAccount = () =>{
//     //获取弹窗中的数据
//     const { account,level } = accountForm.value
//     const accountObj = {
//         account,
//         level
//     }
// }
</script>
